A cafe and wifi website is a great way to promote your cafe and attract customers who are looking for a cozy place to work or study with access to a reliable internet connection. Here are some tips on how to create a great cafe and wifi website:

1. Define your goals: Before you start creating your website, it's important to define your goals. What do you want to achieve with your website? Are you trying to promote your cafe and menu? Are you trying to attract customers who need a reliable wifi connection? Understanding your goals will help you determine what content to include on your website.

2. Choose a platform: There are several platforms you can use to create your cafe and wifi website, such as WordPress, Squarespace, or Wix. Choose a platform that suits your needs and budget.

3. Create a clean and visually appealing design: Your website should be easy to navigate and visually appealing. Choose a clean and simple design that showcases your cafe's ambiance and menu items.

4. Highlight your wifi service: Make sure to highlight your wifi service on your website. Mention the wifi speed and any other relevant details, such as how to connect to the network.

5. Include your menu: Your website should include your cafe's menu and any specials or promotions you offer. Make sure to include mouth-watering photos of your dishes.

6. Provide contact and location information: Be sure to provide contact and location information on your website, including your address, phone number, and email address.

7. Use social media integration: Integrate your social media profiles into your website to allow customers to follow your cafe on their favorite platforms.

Overall, creating a cafe and wifi website can be a great way to attract new customers and promote your business. It requires careful planning, design, and execution to create a website that effectively showcases your cafe's unique offerings and atmosphere.

Hello , this project is quite easy so added some other features to make it look nice to visit.

here the code Link

main.py

from flask import Flask, render_template, request, redirect, url_for, jsonify
from flask_bootstrap import Bootstrap
from wtforms import StringField, SubmitField , IntegerField ,SelectField , TimeField
from wtforms.validators import DataRequired , URL
from flask_sqlalchemy import SQLAlchemy
from flask_wtf import FlaskForm
from flask_ckeditor import CKEditor, CKEditorField
import random

app = Flask(__name__)
app.config['SECRET_KEY'] = '8BYkEfBA6O6donzWlSihBXox7C0sKR6b'
ckeditor = CKEditor(app)
Bootstrap(app)

#-----Database-----
app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///cafes.db"
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

#-----DB create table-----
class Cafe(db.Model):
    id = db.Column(db.Integer,primary_key=True)
    name = db.Column(db.String(250), unique=True, nullable=False)
    map_url = db.Column(db.String(250), nullable=False)
    img_url = db.Column(db.String(250), nullable=False)
    location = db.Column(db.String(250), nullable=False)
    has_sockets = db.Column(db.Integer, nullable=False)
    has_toilet = db.Column(db.Integer, nullable=False)
    has_wifi = db.Column(db.Integer, nullable=False)
    can_take_calls = db.Column(db.Integer, nullable=False)
    seats = db.Column(db.String(250), nullable=False)
    coffee_price = db.Column(db.String(250), nullable=False)
    description = db.Column(db.Text, nullable=False)

#-----Force To load-----
def create_app():
    with app.app_context():
        return db.create_all()
create_app()

#-----Form-----
class CafesForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    map_url = StringField('Map', validators=[DataRequired(),URL()])
    img_url = StringField('Image', validators=[DataRequired(),URL()])
    location = StringField('Location', validators=[DataRequired()])
    has_sockets = SelectField('Socket',choices=[(0), (1)], validators=[DataRequired()])
    has_toilet = SelectField('Toilet', choices=[(0), (1)], validators=[DataRequired()])
    has_wifi = SelectField('Wifi', choices=[(0), (1)], validators=[DataRequired()])
    can_take_calls = SelectField('Can take calls', choices=[(0),(1)], validators=[DataRequired()])
    seats = SelectField('Seats', choices=[('0-10'), ('10-20'), ('20-30'), ('30-40'), ('40-50'), ('50+')], validators=[DataRequired()])
    coffee_price = StringField('Coffee price', validators=[DataRequired()])
    description = CKEditorField("Tell us about the cafe", validators=[DataRequired()])
    submit = SubmitField('Submit', validators=[DataRequired()])

#-----Some variables------
post = ''

@app.route('/', methods=['GET', 'POST'])
def home():
    return render_template('index.html', shop=post)

@app.route('/surpise')
def surpise():
    global post
    all_cafe = Cafe.query.all()
    post = random.choice(all_cafe)
    return redirect(url_for('home'))

@app.route('/places', methods=['GET', 'POST'])
def place():
    all_cafes = Cafe.query.all()
    return render_template('places.html', cafes=all_cafes, number=len(all_cafes),post_id='')

@app.route('/add', methods=['GET', 'POST'])
def add():
    form = CafesForm()
    if form.validate_on_submit():
        new_cafe = Cafe(
            name= form.name.data,
            map_url = form.map_url.data,
            img_url = form.img_url.data,
            location = form.location.data,
            has_sockets = form.has_sockets.data,
            has_toilet = form.has_toilet.data,
            has_wifi = form.has_wifi.data,
            can_take_calls = form.can_take_calls.data,
            seats = form.seats.data,
            coffee_price = form.coffee_price.data,
            description = form.description.data
        )
        db.session.add(new_cafe)
        db.session.commit()
        return redirect(url_for('add'))
    return render_template('add.html',form=form)

@app.route('/edit-post/<post_id>', methods=['GET', 'POST'])
def edit(post_id):
    edit_post = Cafe.query.get(post_id)
    form = CafesForm(
        name=edit_post.name,
        map_url=edit_post.map_url,
        img_url=edit_post.img_url,
        location=edit_post.location,
        has_sockets=edit_post.has_sockets,
        has_toilet=edit_post.has_toilet,
        has_wifi=edit_post.has_wifi,
        can_take_calls=edit_post.can_take_calls,
        seats=edit_post.seats,
        coffee_price=edit_post.coffee_price,
        description=edit_post.description
    )
    if request.method == 'POST':
        edit_post.name = form.name.data
        edit_post.map_url = form.map_url.data
        edit_post.img_url = form.img_url.data
        edit_post.location = form.location.data
        edit_post.has_sockets = form.has_sockets.data
        edit_post.has_toilet = form.has_toilet.data
        edit_post.has_wifi = form.has_wifi.data
        edit_post.can_take_calls = form.can_take_calls.data
        edit_post.seats = form.seats.data
        edit_post.coffee_price = form.coffee_price.data
        edit_post.description = form.description.data

        db.session.commit()
        return redirect(url_for('place'))
    return render_template('add.html',form=form)

@app.route('/delete/<post_id>')
def delete(post_id):
    cafe_to_delete = Cafe.query.get(post_id)
    db.session.delete(cafe_to_delete)
    db.session.commit()
    return redirect(url_for('place'))

@app.route('/coffees', methods=['GET', 'POST'])
def coffee():
    return render_template('coffee.html')

if __name__ == "__main__":
    app.run(debug=True)

The code is look similar to the tutorial project but I have added the description column to make it have something to be able to read when visiting to the page with ckeditor.

header.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Cafe-Surpise!!</title>
        <link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='assets/favicon.ico') }}" />
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
        <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous" />
        <script src="https://use.fontawesome.com/445733f65b.js"></script>
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{{ url_for('static',filename='css/styles.css') }}" rel="stylesheet" />
    </head>
    <body>
        <header>
            <h1 class="site-heading text-center text-faded d-none d-lg-block">
                <span class="site-heading-upper text-primary mb-3">Find a place where you can sit and relax</span>
                <span class="site-heading-lower">Cafe-Surpise!!</span>
            </h1>
        </header>
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
            <div class="container">
                <a class="navbar-brand text-uppercase fw-bold d-lg-none" href="{{url_for('home')}}">Start Bootstrap</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item px-lg-4"><a class="nav-link text-uppercase" href="{{url_for('home')}}">Home</a></li>
                        <li class="nav-item px-lg-4"><a class="nav-link text-uppercase" href="{{url_for('place')}}">Places</a></li>
                        <li class="nav-item px-lg-4"><a class="nav-link text-uppercase" href="{{url_for('add')}}">Add</a></li>
                        <li class="nav-item px-lg-4"><a class="nav-link text-uppercase" href="{{url_for('coffee')}}">Coffee</a></li>
                    </ul>
                </div>
            </div>
        </nav>

Footer.html:

        <footer class="footer text-faded text-center py-5">
            <div class="container">
                <p class="m-0 small">
                    <span>
                        Copyright &copy; HootHoot 2023
                    </span>

                    <span>
                        <a href="https://github.com/Hoothoot12/Coffee-Surpise/tree/main/Cafe-Surpise">GIT</a>
                    </span>
                </p>
            </div>
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="{{url_for('static',filename='js/scripts.js')}}"></script>
    </body>
</html>

header and footer just for saving time to write code on other html.

index.html :

{% include "header.html" %}

        <section class="page-section clearfix">
            <div class="container">
                <div class="intro">
                    {% if shop =='' %}
                    <img class="intro-img img-fluid mb-3 mb-lg-0 rounded" src="{{url_for('static',filename='assets/img/intro.jpg')}}" alt="..." />
                    {% else %}
                    <img class="intro-img img-fluid mb-3 mb-lg-0 rounded" src="{{shop.img_url}}" alt="..." />
                    {% endif %}
                    <div class="intro-text left-0 text-center bg-faded p-5 rounded">
                        <h2 class="section-heading mb-4">
                            {% if shop =='' %}
                            <span class="section-heading-upper">Fresh Coffee</span>
                            {% else %}
                            <span class="section-heading-upper">

                                {% if shop.has_wifi==1 %}
                                <i class="fa fa-fw fa-wifi" aria-hidden="true"></i>
                                {% else %}
                                <i class="fa fa-fw fa-wifi" aria-hidden="true" style="color:white"></i>
                                {% endif %}

                                {% if shop.has_sockets==1 %}
                                <i class="fa fa-fw fa-plug" aria-hidden="true"></i>
                                {% else %}
                                <i class="fa fa-fw fa-plug" aria-hidden="true" style="color:white"></i>
                                {% endif %}

                                {% if shop.has_toilet==1 %}
                                <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true"></i>
                                {% else %}
                                <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true" style="color:white"></i>
                                {% endif %}

                                {% if shop.can_take_calls==1 %}
                                <i class="fa fa-fw fa-phone" aria-hidden="true"></i>
                                {% else %}
                                <i class="fa fa-fw fa-phone" aria-hidden="true" style="color:white"></i>
                                {% endif %}

                            </span>
                            {% endif %}
                            {% if shop =='' %}
                            <span class="section-heading-lower">Worth Drinking</span>
                            {% else %}
                            <a class="section-heading-lower" style="color:black" href="{{shop.map_url}}"><b>{{shop.name}}</b></a>
                            {% endif %}
                        </h2>
                        {% if shop =='' %}
                        <p class="mb-3">Start your mornings off right with a delicious cup of coffee that will awaken your senses and set the tone for a productive day ahead. A visit to your nearby cafe promises a delightful experience, where expert baristas craft the perfect cup, tailored to your preferences.</p>
                        {% else %}
                        <p class="mb-3">{{shop.description}}</p>
                        {% endif %}
                        <div class="intro-button mx-auto"><a class="btn btn-primary btn-xl" href="{{url_for('surpise')}}">Surpise me!</a></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="page-section cta">
            <div class="container">
                <div class="row">
                    <div class="col-xl-9 mx-auto">
                        <div class="cta-inner bg-faded text-center rounded">
                            <h2 class="section-heading mb-4">
                                <span class="section-heading-upper">Please read</span>
                                <span class="section-heading-lower">Signs</span>
                            </h2>
                            <p class="mb-0">
                                <li>Wifi  <i class="fa fa-fw fa-wifi" aria-hidden="true"></i>: available   <i class="fa fa-fw fa-wifi" aria-hidden="true" style="color:white"></i>: not available</li>
                                <li>Socket  <i class="fa fa-fw fa-plug" aria-hidden="true"></i>: available    <i class="fa fa-fw fa-plug" aria-hidden="true" style="color:white"></i>: not available</li>
                                <li>Toilet  <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true"></i>: available <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true" style="color:white"></i>: not available</li>
                                <li>Call  <i class="fa fa-fw fa-phone" aria-hidden="true"></i>: available <i class="fa fa-fw fa-phone" aria-hidden="true" style="color:white"></i>: not available</li>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

{% include "footer.html" %}

here the main page, I have added some special features such as 'surpise' button, it will randomly showing you a cafe and all of it data from database. here what the page look like.

places.html :

{% include "header.html" %}

{% for post in cafes %}
        <section class="page-section about-heading">
            <div class="container">
                <img class="img-fluid rounded about-heading-img mb-3 mb-lg-0" src="{{post.img_url}}" alt="..." />
                <div class="about-heading-content">
                    <div class="row">
                        <div class="col-xl-9 col-lg-10 mx-auto">
                            <div class="bg-faded rounded p-5">
                                <h2 class="section-heading mb-4">
                                    <span class="section-heading-upper">
                                        {% if post.has_wifi==1 %}
                                        <i class="fa fa-fw fa-wifi" aria-hidden="true"></i>
                                        {% else %}
                                        <i class="fa fa-fw fa-wifi" aria-hidden="true" style="color:white"></i>
                                        {% endif %}

                                        {% if post.has_sockets==1 %}
                                        <i class="fa fa-fw fa-plug" aria-hidden="true"></i>
                                        {% else %}
                                        <i class="fa fa-fw fa-plug" aria-hidden="true" style="color:white"></i>
                                        {% endif %}

                                        {% if post.has_toilet==1 %}
                                        <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true"></i>
                                        {% else %}
                                        <i class="fa fa-fw fa-solid fa-droplet" aria-hidden="true" style="color:white"></i>
                                        {% endif %}

                                        {% if post.can_take_calls==1 %}
                                        <i class="fa fa-fw fa-phone" aria-hidden="true"></i>
                                        {% else %}
                                        <i class="fa fa-fw fa-phone" aria-hidden="true" style="color:white"></i>
                                        {% endif %}

                                    </span>
                                    <a class="section-heading-lower" style="color:black" href="{{post.map_url}}"><b>{{post.name}}</b></a>
                                </h2>
                                <p><b>Location</b>: {{post.location}}<br>
                                    <b>Seats</b>: {{post.seats}}<br>
                                    <b>Price</b>: {{post.coffee_price}}</p>
                                <p class="mb-0">
                                    {{post.description}}
                                </p>
                                <p>
                                    <br>
                                <a class="btn btn-primary float-right" href="{{url_for('edit', post_id=post.id)}}">Edit</a> <a class="btn btn-primary float-right" href="{{url_for('delete', post_id=post.id)}}">Delete</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
{% endfor %}
{% include "footer.html" %}

This page is showing all the cafes in the database and also you can edit and delete data in the database from this page and as you can see you can check if the cafe has socket, wifi ,toilet and call through the icon which will change color whether they are available or not. But there is one problem that I havent solved it is when you edit the data with ckeditor <p></p> will appear in the description data. Here what the page look like.

add.html :

{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
{% include "header.html" %}


        <section class="page-section">
            <div class="container">
                <div class="product-item">
                    <div class="product-item-title d-flex">
                        <div class="bg-faded p-5 d-flex me-auto rounded">
                            <h2 class="section-heading mb-0">
                                <span class="section-heading-upper">Add</span>
                                <span class="section-heading-lower">New Cafe</span>
                            </h2>
                        </div>
                    </div>
                    <div class="product-item-form">
                          {{ ckeditor.load() }}
                          {{ ckeditor.config(name='description') }}
                          {{ wtf.quick_form(form, novalidate=True) }}
                          {{ form.hidden_tag() }}
                    </div>
                    <!--<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="{{url_for('static', filename='assets/img/products-02.jpg')}}" alt="..." />-->
                    <div class="product-item-description d-flex ms-auto">
                        <div class="bg-faded p-5 rounded">
                            <p class="mb-0">When you finish filling the form, dont forget to check the cafe in places section after you press submit button or click this link <a class="mb-0" style="color: red" href="{{url_for('place')}}">Places</a>.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

{% include "footer.html" %}

{% endblock %}

This page is for adding new data to the database and every slots is required in order to add. Here is what the page look like.

coffee.html:

{% include "header.html" %}


        <section class="page-section about-heading">
            <div class="container">
                <img class="img-fluid rounded about-heading-img mb-3 mb-lg-0" src="{{url_for('static', filename = 'assets/img/products-01.jpg')}}" alt="..." />
                <div class="about-heading-content">
                    <div class="row">
                        <div class="col-xl-9 col-lg-10 mx-auto">
                            <div class="bg-faded rounded p-5">
                                <h2 class="section-heading mb-4">
                                    <span class="section-heading-upper">Strong Coffee, Strong Roots</span>
                                    <span class="section-heading-lower">What are the Benefits of Drinking Coffee?</span>
                                </h2>
                                <p>Caffeine is the main ingredient in coffee, and this has made it popular. Caffeine has a stimulant effect, meaning that it gives people more energy and increases mental alertness. Coffee also contains polyphenols, which have antioxidant properties and are believed to be a big reason coffee provides a health advantage.</p>
                                <p class="mb-0">
Coffee has tannins, which can deplete the body of Magnesium, Calcium, Iron, Vitamin B1 and Zinc. Supplementing with a multivitamin should be considered, especially if your diet is not rich in fruits and vegetables. Join us for your daily routine, an outing with friends, or simply just to enjoy some alone time.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

{% include "footer.html" %}

Actually, this page is just a placeholder, there is nothing special about it.

The problem that I found so many times in this project mostly is my mistake on spelling and comma. and there is another thing that I have been curious is 'SECRET KEY' in app.config, I have asked someone in stackoverflow to check my mistake and they both reccommend me to not ever write 'SECRET KEY' in my project but when I delete it I cant edit anything in places.html. Is there a reason to not using 'SECRET KEY'?

[style.css] is too long so if you are interested. you can check it here Link.

Approach to the Project: The provided code uses the Tkinter library to create a simple GUI application for adding a watermark to an image. It defines functions to add the watermark, handle the button click event, and opens a file dialog to select an image file. The chosen image is then processed and saved with the watermark added.

What Was Easy: The overall structure of the code is relatively straightforward, and the usage of Tkinter for creating the GUI is concise. The core logic of adding the watermark is also clear and follows a step-by-step process.

What Was Hard: The code lacks error handling and validation. For example, if the selected file is not an image or the font file ("arial.ttf") is missing, it may result in exceptions. Additionally, the code always saves the output image as "output.jpg" without considering the original file name or extension, which might not be desirable.

How to Improve for the Next Project:

1. Implement error handling and validation to handle potential exceptions and user errors gracefully. For instance, check if the selected file is a valid image file before proceeding with the watermarking process.

2. Allow users to specify the output file name and extension, either by opening a file dialog for saving or by appending the watermark to the original file with a new name.

3. Consider adding options for customizing the watermark's appearance, such as font size, color, and transparency, to provide more flexibility.

4. Improve the user interface by adding additional elements like progress indicators, preview of the watermarked image, or the ability to batch process multiple images.

Biggest Learning from Today: The biggest learning from today's code could be understanding how to use Tkinter to create a simple GUI application and integrate it with image processing using the PIL library. It demonstrates how to handle events, interact with file dialogs, and update the GUI with status messages.

What I Would Do Differently: If I were to tackle this project again, I would focus on incorporating error handling and validation from the beginning. Additionally, I would consider implementing more customization options for the watermark and improving the user interface to provide a better user experience.

Remember, reflection and continuous improvement are key to becoming a better developer.